// Name:            Tab
// Description:     Defines styles for a tabbed navigation
//
// Component:       `uk-tab`
//
// Modifiers:       `uk-tab-flip`
//                  `uk-tab-center`
//                  `uk-tab-grid`
//                  `uk-tab-bottom`
//                  `uk-tab-left`
//                  `uk-tab-right`
//                  `uk-tab-responsive`
//
// States:          `uk-active`
//                  `uk-disabled`
//
// Markup:
//
// <!-- uk-tab -->
// <ul class="uk-tab" data-uk-tab>
//     <li class="uk-active"><a href=""></a></li>
//     <li><a href=""></a></li>
// </ul>
//
// ========================================================================


// Variables
// ========================================================================

@tab-border: #ddd;
@tab-border-width: 1px;
@tab-padding-horizontal: 12px;
@tab-padding-vertical: 8px;
@tab-padding-top: @tab-padding-vertical;
@tab-padding-bottom: @tab-padding-vertical;
@tab-margin-horizontal: 5px;
@tab-margin-vertical: 5px;
@tab-color: #07D;
@tab-hover-border: #f5f5f5;
@tab-hover-background: #f5f5f5;
@tab-hover-color: #059;
@tab-active-border: #ddd;
@tab-active-background: #fff;
@tab-active-color: #444;
@tab-disabled-color: #999;


/* ========================================================================
   Component: Tab
 ========================================================================== */

.uk-tab {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: @tab-border-width solid @tab-border;
}

/*
 * Micro clearfix on the deepest container
 */

.uk-tab:before,
.uk-tab:after {
  content: " ";
  display: table;
}

.uk-tab:after {
  clear: both;
}

/*
 * Items
 * 1. Create position context for dropdowns
 */

.uk-tab > li {
  margin-bottom: -@tab-border-width;
  float: left;
  /* 1 */
  position: relative;
}

.uk-tab > li > a {
  display: block;
  padding: @tab-padding-top @tab-padding-horizontal @tab-padding-bottom @tab-padding-horizontal;
  border: @tab-border-width solid transparent;
  border-bottom-width: 0;
  color: @tab-color;
  text-decoration: none;
  .hook-tab;
}

.uk-tab > li:nth-child(n+2) > a {
  margin-left: @tab-margin-horizontal;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Also apply if dropdown is opened
 * 3. Remove default focus style
 */

.uk-tab > li > a:hover,
.uk-tab > li > a:focus, // 1
.uk-tab > li.uk-open > a { // 2
  border-color: @tab-hover-border;
  background: @tab-hover-background;
  color: @tab-hover-color;
  /* 2 */
  outline: none;
  .hook-tab-hover;
}

.uk-tab > li:not(.uk-active) > a:hover,
.uk-tab > li:not(.uk-active) > a:focus,
.uk-tab > li.uk-open:not(.uk-active) > a {
  margin-bottom: @tab-border-width;
  padding-bottom: @tab-padding-bottom - @tab-border-width;
}

/* Active */
.uk-tab > li.uk-active > a {
  border-color: @tab-active-border;
  border-bottom-color: transparent;
  background: @tab-active-background;
  color: @tab-active-color;
  .hook-tab-active;
}

/* Disabled */
.uk-tab > li.uk-disabled > a {
  color: @tab-disabled-color;
  cursor: auto;
  .hook-tab-disabled;
}

.uk-tab > li.uk-disabled > a:hover,
.uk-tab > li.uk-disabled > a:focus,
.uk-tab > li.uk-disabled.uk-active > a {
  background: none;
  border-color: transparent;
}


/* Modifier: 'tab-flip'
 ========================================================================== */

.uk-tab-flip > li {
  float: right;
}

.uk-tab-flip > li:nth-child(n+2) > a {
  margin-left: 0;
  margin-right: @tab-margin-horizontal;
}


/* Modifier: 'tab-responsive'
 ========================================================================== */

.uk-tab > li.uk-tab-responsive > a {
  margin-left: 0;
  margin-right: 0;
}

/*
 * Icon
 */

.uk-tab-responsive > a:before {
  content: "\f0c9\00a0";
  font-family: FontAwesome;
}


/* Modifier: 'tab-center'
 ========================================================================== */

.uk-tab-center {
  border-bottom: @tab-border-width solid @tab-border;
}

.uk-tab-center-bottom {
  border-bottom: none;
  border-top: @tab-border-width solid @tab-border;
}

.uk-tab-center:before,
.uk-tab-center:after {
  content: " ";
  display: table;
}

.uk-tab-center:after {
  clear: both;
}


/*
 * 1. Using `right` to prevent vertical scrollbar caused by centering if to many tabs
 */

.uk-tab-center .uk-tab {
  position: relative;
  right: 50%;
  border: none;
  float: right;
}

.uk-tab-center .uk-tab > li {
  position: relative;
  right: -50%;
}

.uk-tab-center .uk-tab > li > a {
  text-align: center;
}


/* Modifier: 'tab-bottom'
 ========================================================================== */

.uk-tab-bottom {
  border-top: @tab-border-width solid @tab-border;
  border-bottom: none;
}

.uk-tab-bottom > li {
  margin-top: -@tab-border-width;
  margin-bottom: 0;
}

.uk-tab-bottom > li > a {
  padding-top: @tab-padding-bottom;
  padding-bottom: @tab-padding-top;
  border-bottom-width: @tab-border-width;
  border-top-width: 0;
}

.uk-tab-bottom > li:not(.uk-active) > a:hover,
.uk-tab-bottom > li:not(.uk-active) > a:focus,
.uk-tab-bottom > li.uk-open:not(.uk-active) > a {
  margin-bottom: 0;
  margin-top: @tab-border-width;
  padding-bottom: @tab-padding-top;
  padding-top: @tab-padding-bottom - @tab-border-width;
}

.uk-tab-bottom > li.uk-active > a {
  border-top-color: transparent;
  border-bottom-color: @tab-active-border;
}


/* Modifier: 'tab-grid'
 ========================================================================== */

/*
 * 1. Create position context to prevent hidden border because of negative `z-index`
 */

.uk-tab-grid {
  margin-left: -@tab-margin-horizontal;
  border-bottom: none;
  /* 1 */
  position: relative;
  z-index: 0;
}

.uk-tab-grid:before {
  display: block;
  position: absolute;
  left: @tab-margin-horizontal;
  right: 0;
  bottom: -@tab-border-width;
  border-top: @tab-border-width solid @tab-border;
  /* 1 */
  z-index: -1;
}

.uk-tab-grid > li:first-child > a {
  margin-left: @tab-margin-horizontal;
}

.uk-tab-grid > li > a {
  text-align: center;
}

/*
 * If `uk-tab-bottom`
 */

.uk-tab-grid.uk-tab-bottom {
  border-top: none;
}

.uk-tab-grid.uk-tab-bottom:before {
  top: -@tab-border-width;
  bottom: auto;
}


/* Modifier: 'tab-left', 'tab-right'
 ========================================================================== */

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

  .uk-tab-left,
  .uk-tab-right {
    border-bottom: none;
  }

  .uk-tab-left > li,
  .uk-tab-right > li {
    margin-bottom: 0;
    float: none;
  }

  .uk-tab-left > li > a,
  .uk-tab-right > li > a {
    padding-top: @tab-padding-vertical;
    padding-bottom: @tab-padding-vertical;
  }

  .uk-tab-left > li:nth-child(n+2) > a,
  .uk-tab-right > li:nth-child(n+2) > a {
    margin-left: 0;
    margin-top: @tab-margin-vertical;
  }

  .uk-tab-left > li.uk-active > a,
  .uk-tab-right > li.uk-active > a {
    border-color: @tab-active-border;
  }

  /*
   * Modifier: 'tab-left'
   */
  .uk-tab-left {
    border-right: @tab-border-width solid @tab-border;
  }

  .uk-tab-left > li {
    margin-right: -@tab-border-width;
  }

  .uk-tab-left > li > a {
    border-bottom-width: @tab-border-width;
    border-right-width: 0;
  }

  .uk-tab-left > li:not(.uk-active) > a:hover,
  .uk-tab-left > li:not(.uk-active) > a:focus {
    margin-bottom: 0;
    margin-right: @tab-border-width;
    padding-bottom: @tab-padding-vertical;
    padding-right: @tab-padding-horizontal - @tab-border-width;
  }

  .uk-tab-left > li.uk-active > a {
    border-right-color: transparent;
  }

  /*
   * Modifier: 'tab-right'
   */
  .uk-tab-right {
    border-left: @tab-border-width solid @tab-border;
  }

  .uk-tab-right > li {
    margin-left: -@tab-border-width;
  }

  .uk-tab-right > li > a {
    border-bottom-width: @tab-border-width;
    border-left-width: 0;
  }

  .uk-tab-right > li:not(.uk-active) > a:hover,
  .uk-tab-right > li:not(.uk-active) > a:focus {
    margin-bottom: 0;
    margin-left: @tab-border-width;
    padding-bottom: @tab-padding-vertical;
    padding-left: @tab-padding-horizontal - @tab-border-width;
  }

  .uk-tab-right > li.uk-active > a {
    border-left-color: transparent;
  }

}


// Hooks
// ========================================================================

.hook-tab-misc;

.hook-tab() {
}

.hook-tab-hover() {
}

.hook-tab-active() {
}

.hook-tab-disabled() {
}

.hook-tab-misc() {
}